<template>
  <div>
    <!-- 搜索区域 -->
    <a-form layout="horizontal">
      <a-row>
        <div>
          <a-col :md="6" :sm="24">
            <a-radio-group defaultValue="a" buttonStyle="solid" v-model="dataType" @change="listData">
              <a-radio-button value="">全部</a-radio-button>
              <a-radio-button value="1">我的收藏</a-radio-button>
            </a-radio-group>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item
              label="歌曲"
              :labelCol="{span: 4}"
              :wrapperCol="{span: 18, offset: 2}">
              <a-input v-model="songName"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item
              label="歌手"
              :labelCol="{span: 4}"
              :wrapperCol="{span: 18, offset: 2}">
              <a-input v-model="singer"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item
              label=""
              :labelCol="{span: 4}"
              :wrapperCol="{span: 18, offset: 1}">
                <span style="padding-top: 3px;margin-left: 20px;">
                  <a-button type="primary" @click="listData">查询</a-button>
                  <a-button style="margin-left: 8px" @click="reset">重置</a-button>
                </span>
            </a-form-item>
          </a-col>
        </div>
      </a-row>
    </a-form>
    <a-table ref="TableInfo"
             :columns="columns"
             :dataSource="data"
             :pagination="pagination"
             :loading="loading"
             @change="handleTableChange"
             @expand="expandUser"
             :expandedRowKeys="expandedRowKeys"
    >
      <a-table slot="expandedRowRender"
               :columns="userColumns"
               :dataSource="userData"
               :pagination="false"
               :loading="loading"
               @expand="expandMusic"
               :expandedRowKeys="expandedUserKeys"
      >
        <a-table slot="expandedRowRender"
                 :columns="musicColumns"
                 :dataSource="musicData"
                 :pagination="false"
                 :loading="loading"
        >
          <template slot="img" slot-scope="text, record">
            <a-avatar :src="text"></a-avatar>
          </template>
          <audio :ref="record.id" @play="playMusic(record.id)" :key="record.id" controls="controls" slot="downloadUrl"
                 slot-scope="text, record">
            <source :src="text" type="audio/mp3"/>
            <source :src="text" type="audio/ogg"/>
            <embed :src="text"/>
          </audio>
        </a-table>
      </a-table>

      <template slot="img" slot-scope="text, record">
        <a-avatar :src="text"></a-avatar>
      </template>
      <audio :ref="record.id" @play="playMusic(record.id)" :key="record.id" controls="controls" slot="downloadUrl"
             slot-scope="text, record">
        <source :src="text" type="audio/mp3"/>
        <source :src="text" type="audio/ogg"/>
        <embed :src="text"/>
      </audio>
      <template slot="moodMessage" slot-scope="text, record">
<!--        <a @click="showMoodMessage(record)">心情寄语&nbsp;&nbsp;</a>-->
        <a @click="collectMusic(record)">{{record.isCollect == 1 ? '取消收藏' : '收藏'}}</a>
      </template>
    </a-table>

    <a-modal
      :title="dialogMoodTitle"
      :visible="dialogMood"
      @ok="updateMusicMood"
      :confirmLoading="false"
      @cancel="dialogMood = false"
    >
      <a-textarea placeholder="心情寄语" :rows="4" v-model="moodMessage"/>
    </a-modal>
  </div>
</template>

<script>
  export default {
    name: 'MusicList',
    data() {
      return {
        data: [],
        userData: [],
        musicData: [],
        dataType: '',
        songName: '',
        singer: '',
        musicId: '',
        isCollect: 0,
        userId: this.$store.state.account.user.userId,
        dialogMood: false,
        dialogMoodTitle: '',
        moodMessage: '',
        expandedRowKeys: [],
        expandedUserKeys: [],
        columns: [
          {
            title: '',
            dataIndex: 'img',
            scopedSlots: {customRender: 'img'},
            width: 60
          },
          {
            title: '歌曲',
            dataIndex: 'songName',
            ellipsis: true
          }, {
            title: '歌手',
            dataIndex: 'singer'
          }, {
            title: '播放',
            dataIndex: 'downloadUrl',
            scopedSlots: {customRender: 'downloadUrl'},
            align: 'center',
            width: 400
          }, {
            title: '操作',
            dataIndex: 'moodMessage',
            scopedSlots: {customRender: 'moodMessage'},
            align: 'center',
            width: 150
          }
        ],
        userColumns: [
          {
            title: '用户ID',
            dataIndex: 'userId'
          },
          {
            title: '用户名',
            dataIndex: 'userName'
          },
          {
            title: 'rating',
            dataIndex: 'rating'
          }
        ],
        musicColumns: [
          {
            title: '',
            dataIndex: 'img',
            scopedSlots: {customRender: 'img'},
            width: 60
          },
          {
            title: '歌曲',
            dataIndex: 'songName',
            ellipsis: true
          }, {
            title: '歌手',
            dataIndex: 'singer'
          }, {
            title: '播放',
            dataIndex: 'downloadUrl',
            scopedSlots: {customRender: 'downloadUrl'},
            align: 'center',
            width: 400
          }, {
            title: 'rating',
            dataIndex: 'rating'
          }
        ],
        loading: true,
        pagination: {
          pageSizeOptions: ['10', '20', '30', '40', '100'],
          defaultCurrent: 1,
          defaultPageSize: 10,
          showSizeChanger: true,
          showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
        }
      }
    },
    methods: {
      handleTableChange(pagination) {
        this.paginationInfo = pagination
        this.listData()
      },
      reset() {
        this.songName = ''
        this.singer = ''
      },
      playMusic(id) {
        for (let item of this.data) {
          if (item.id != id) {
            this.$refs[item.id].pause()
          }
        }
      },
      collectMusic(record) {
        this.musicId = record.id
        if (record.isCollect) {
          record.isCollect == 0 ? this.isCollect = 1 : this.isCollect = 0
        } else {
          this.isCollect = 1
        }
        this.updateMusicMood()
      },
      updateMusicMood() {
        this.$post('music/update', {
          userId: this.userId,
          musicId: this.musicId,
          moodMessage: this.moodMessage,
          isCollect: this.isCollect
        }).then((r) => {
          this.listData()
        }).catch((r) => {

        })
        this.moodMessage = ''
        this.isCollect = 0
        this.dialogMood = false
      },
      showMoodMessage(record) {
        this.musicId = record.id
        this.dialogMoodTitle = `${record.songName}(${record.singer})`
        this.moodMessage = record.moodMessage
        this.isCollect = record.isCollect
        this.dialogMood = true
      },
      listData() {
        let params = {}
        if (this.paginationInfo) {
          // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
          this.$refs.TableInfo.pagination.current = this.paginationInfo.current
          this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize
          params.pageSize = this.paginationInfo.pageSize
          params.pageNum = this.paginationInfo.current
        } else {
          // 如果分页信息为空，则设置为默认值
          params.pageSize = this.pagination.defaultPageSize
          params.pageNum = this.pagination.defaultCurrent
        }
        this.$get('music/list', {
          ...params,
          songName: this.songName,
          singer: this.singer,
          userId: this.userId,
          musicId: this.musicId,
          dataType: this.dataType
        }).then((r) => {
          this.data = r.data.rows
          const pagination = {...this.pagination}
          pagination.total = r.data.total
          this.pagination = pagination
          // 数据加载完毕，关闭loading
          this.loading = false
        })
      },
      listUser(record) {
        this.$get('music/listUser', {
          musicId: record.id
        }).then((r) => {
          this.userData = r.data
          this.loading = false
        })
      },
      listMusicByUser(record) {
        this.$get('music/listMusicByUser', {
          userId: record.userId
        }).then((r) => {
          this.musicData = r.data
          this.loading = false
        })
      },
      expandUser(expanded, record) {
        this.listUser(record)
        this.expandedRowKeys = []
        if (expanded) {
          for (let i in this.data) {
            if (this.data[i].id == record.id) {
              this.expandedRowKeys.push(parseInt(i))
              break
            }
          }
        }
      },
      expandMusic(expanded, record) {
        this.listMusicByUser(record)
        this.expandedUserKeys = []
        if (expanded) {
          for (let i in this.userData) {
            if (this.userData[i].userId == record.userId) {
              this.expandedUserKeys.push(parseInt(i))
              break
            }
          }
        }
      }
    },
    mounted() {
      this.listData()
    }
  }
</script>

<style scoped>

</style>
